class Fdj{
    constructor(el,options={}){
        // this.键=值
        this.el=document.querySelector(el)
        this.img=this.el.querySelector('.img')
        this.mask=this.el.querySelector('.mask')
        this.enlarge=this.el.querySelector('.enlarge')

        // this.函数名()  调用方法
        this.init()
    }
    // 函数名(){}
    init(){
        this.imgOver()
        this.maskMove()
        // this.imgOut()
    }
    imgOver(){
        this.img.onmouseover=()=> this.mask.style.display=this.enlarge.style.display='block'
        this.img.onmouseout=()=> this.mask.style.display=this.enlarge.style.display='' 
        
    }
    maskMove(){
        this.img.onmousemove=(evt)=>{

            let e=evt || window.event
            let X=e.pageX-this.img.offsetLeft-this.mask.offsetWidth/2
            let Y=e.pageY-this.img.offsetTop-this.mask.offsetHeight/2
            if(X<0) X=0
            if(Y<0) Y=0
            let maxLeft=this.img.clientWitdh-this.mask.offsetWidth
            let maxTop=this.img.clientHeight-this.mask.offsetHeight
            if(X>maxLeft) X=maxLeft
            if(Y>maxTop) Y=maxTop
            
            this.mask.style.left=X+'px'
            this.mask.style.top=Y+'px'
            this.picenlarge(X,Y)
        }
    }
    picenlarge(X,Y){
        this.enlarge.style.backgroundPosition=`-${X*2}px -${Y*2}px`
    }
}

export default Fdj;